<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 退款受理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.orderType" placeholder="订单类型" class="handle-select mr10" @change="handleSearch">
                    <el-option key="1" label="商品订单" value="0"></el-option>
                </el-select>
                <el-input v-model="query.orderNum" placeholder="订单号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="serviceName" :label="getLable()"></el-table-column>
                <el-table-column label="商品价格">
                    <template slot-scope="scope">￥{{scope.row.totalPrice}}</template>
                </el-table-column>
                <el-table-column label="订单号" prop="orderNum"></el-table-column>
                <el-table-column prop="payNum" label="交易号"></el-table-column>
                <el-table-column label="订单创建时间">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.orderTime)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index)"
                        >退款受理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageNum"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="订单详情" :visible.sync="editVisible" width="50%">
            <el-form ref="form" label-width="80px">
                <el-form-item label="商品图片">
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="formData.goodsImgsrc"></el-image>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="formData.serviceName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="formData.orderNum" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="交易号">
                    <el-input v-model="formData.payNum" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="交易日期">
                    <el-date-picker
                    format="yyyy-MM-dd HH:mm:ss"
                    :value="getRealTime(formData.orderTime)"
                    type="datetime"
                    placeholder="选择日期时间"
                    :disabled="true">
                </el-date-picker>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input :disabled="true" v-model="formData.orderCount"></el-input>
                </el-form-item>
                <el-form-item label="优惠价格">
                    <el-input :disabled="true" v-model="formData.preferentialPrice"></el-input>
                </el-form-item>
                <el-form-item label="真实价格">
                    <el-input :disabled="true" v-model="formData.serviceZprice"></el-input>
                </el-form-item>
                <el-form-item label="支付类型">
                    <el-input :disabled="true" v-model="formData.payType"></el-input>
                </el-form-item>
                 <el-form-item label="退款受理">
                    <el-select v-model="refundStatus" placeholder="请选择" class="handle-select mr10">
                        <el-option  label="同意退款" :value="2"></el-option>
                        <el-option  label="拒绝退款" :value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleConfirm">确 认</el-button>
                <el-button @click="editVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { searchGoodsOrders,getRefundGoodsOrders, refundGoodsOrders} from '../../api/order';

export default {
    name: 'basetable',
    data() {
        return {
            query: {
                orderType: '0',
                orderNum: '',
                pageNum: 1,
                pageSize: 5,
                userId: localStorage.getItem("userId"),
                refundGoodsStatus: 1
            },
            showData:{},
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            refundStatus: 2,
            formData: {}
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getLable(){
            if(this.query.orderType == '0'){
                return '商品名称';
            }
        },
        getPayType(payType) {
            if(payType == 1 || payType == '支付宝'){
                return '支付宝';
            }else if(payType == 2 || payType == '微信'){
                return '微信';
            }else{
                this.formData.payType = '卡尔钱包';
            }
        },
        getRealTime(time){
            if(this.query.orderType == '0'){
                return new Date(time + 1000 * 60 * 60 * 8);
            }
        },
        handleConfirm(){
            this.showData.returnGoodsStatus = this.refundStatus;
            this.editVisible = false;
            console.log(this.showData);
            refundGoodsOrders(this.showData).then(res => {
                console.log(res);
                if(res.code == 200){
                     this.$message.success('受理成功');
                     this.getData();
                }else {
                    this.$message.error('受理失败');
                    this.getData();
                }
            });
        },
        getPayType(payType) {
            if(payType == 1 || payType == '支付宝'){
                return '支付宝';
            }else if(payType == 2 || payType == '微信'){
                return '微信';
            }else{
                return '卡尔钱包';
            }
        },
        formatDate(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return year + '年' + month + '月' + day + '日';
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            if(this.query.orderType == '0'){
                if(this.query.orderNum == ''){
                    getRefundGoodsOrders(this.query).then(res => {
                        console.log(this.query);
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }else{
                    searchGoodsOrders(this.query).then(res => {
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }
            }
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            if(this.query.orderNum == ''){
                    getRefundGoodsOrders(this.query).then(res => {
                        console.log(this.query);
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }else{
                    searchGoodsOrders(this.query).then(res => {
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 编辑操作
        handleEdit(index) {
            this.formData = this.tableData[index];
            this.showData.userId = this.tableData[index].userId;
            this.showData.totalPrice = this.tableData[index].totalPrice;
            this.showData.id = this.tableData[index].id;
            this.editVisible = true;
            var payType = this.getPayType(this.formData.payType);
            this.formData.payType = payType;
            console.log(this.showData);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData();
        }
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
